<template>
	<view class="">
		<el-dialog title="编辑教程" :visible.sync="show1" width="70%" @close="handleClose" zIndex="100">
			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 110rpx;">标题：</view>
				<el-input placeholder="请输入标题" v-model="params.title" size="mini" />
			</view>
			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 110rpx;">描述：</view>
				<el-input placeholder="请输入描述" v-model="params.desc" size="mini" />
			</view>
			<view class="display_flex_bet" style="margin-bottom: 20rpx;">
				<view class="display_flex">
					<view style="width: 110rpx;">分类：</view>
					<el-select v-model="params.classDesc" placeholder="请选择分类" size="mini">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</view>
				<view class="display_flex">
					<view style="width: 130rpx;">排序值：</view>
					<el-input style="width: 300rpx;" placeholder="请输入排序值" v-model="params.groupNum" size="mini"
						type="number" />
				</view>
			</view>
			
			<vue-ueditor-wrap v-model="params.content" :config="myConfig"></vue-ueditor-wrap>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose" size="mini">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import uploadFile from '@/js_sdk/tencentcloud/upload-file';
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	import VueUeditorWrap from 'vue-ueditor-wrap'
	export default {
		components: {
			jinEdit,
			VueUeditorWrap
		},
		props: ["detail"],

		data() {
			return {
				show1: true,
				myConfig: {
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 240,
					// 初始容器宽度
					initialFrameWidth: '100%',
				},
				params: {
					title: "",
					desc: "",
					classDesc: '',
					content: "",
					groupNum: 0,
				},
				options: [{
					value: '美术',
					label: '美术'
				}, {
					value: '书法',
					label: '书法'
				}],
			}
		},

		mounted() {
			if (this.detail) {
				this.params = this.detail
				this.$forceUpdate()
			}
		},

		methods: {
			handleClose() {
				this.$emit("close", true)
			},

			confirmAdd() {
				this.params.content = this.params.content.split("[img]").join("<img src=")
				this.params.content = this.params.content.split("[/img]").join(" />")
				this.$http.Post("admin/course/save ", this.params).then(res => {
					this.$emit("save", true)
				})
			},

		}
	}
</script>

<style>
	.display_flex {
		display: flex;
		align-items: center;
	}
</style>
